<template>
  <div>
    <div v-if="sourceType !== 'bussRisk'" class="list-table" style="margin-bottom: 20px; text-align: center;">
      <ul class="disting">
        <li style="background: linear-gradient(to right bottom, #FC6E7C 0%,#FFA185 100%);">
          <p>{{ $t('变更时间') }}</p>
          <span v-if="form.changeDate">{{ parseTime(form.changeDate) }} </span>
          <span v-else>-</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #A46CF1 0%,#D99CFB 100%);">
          <p>{{ $t('总股本') + $t('金额单位') }}</p>
          <span v-if="form.totalMoney">{{ moneyFormat(form.totalMoney,'w') }}</span>
          <span v-else>-</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #3D9FFD 0%,#7AD6FF 100%);">
          <p>{{ $t('总股数(万股)') }}</p>
          <span v-if="form.totalNum">{{ moneyFormat(form.totalNum,'w') }}</span>
          <span v-else>-</span>
        </li>
        <li style="background: linear-gradient(to right bottom, rgb(246,194,61) 0%, rgb(247,215,135) 100%);">
          <p>{{ $t('阶段') }}</p>
          <span v-if="form.changeStageLabel">{{ $t(form.changeStageLabel) }}</span>
          <span v-else>-</span>
        </li>
      </ul>
    </div>
    <div class="list-table">
      <!-- 变更记录 -->
      <div v-if="sourceType !== 'bussRisk'" class="area-header">
        <span class="area-header-title">{{ $t('股东变更记录') }}</span>
      </div>
      <el-row v-if="sourceType !== 'bussRisk'" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['company:holder:edit']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addHandle"
          >{{ $t('股东变更') }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-sort"
            size="mini"
            @click="holderVS"
          >{{ $t('对比') }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-coordinate"
            size="mini"
            @click="holderChart"
          >{{ $t('股东结构图') }}</el-button>
        </el-col>
      <!--<el-col :span="1.5">
        <el-button
          v-hasPermi="['company:holder:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-col>-->
      </el-row>
      <el-table v-if="sourceType !== 'bussRisk'" v-loading="changeLoading" tooltip-effect="darkTable" :data="companyHolderChangeList" border>
        <el-table-column :label="$t('选择')" type="index" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            <el-radio v-model="radioView" :label="scope.row.id" @change="choiceRadio(scope.row.id)">
              <span style="display: none;" />
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column :label="$t('变更时间')" align="center" prop="changeDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.changeDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('总股本') + $t('金额单位')" align="center" prop="totalMoney">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.totalMoney, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('总股数(万股)')" align="center" prop="totalNum">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.totalNum, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('阶段')" align="center" prop="changeStageLabel">
          <template slot-scope="scope">
            <span>{{ $t(scope.row.changeStageLabel) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['company:holder:remove']"
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row)"
            >{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="sourceType !== 'bussRisk'"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!--股东详情 -->
      <div class="area-header" style="display: flex;justify-content: space-between;">
        <span class="area-header-title">{{ $t('股东信息') }}</span>
        <div v-if="sourceType === 'bussRisk'">
          <el-button
            class="iconfont icon-duibi link-type"
            size="mini"
            circle
            style="border: 2px solid rgba(27, 31, 40, .1) !important;padding: 6px;"
            :title="$t('对比')"
            @click="holderVS"
          />
          <el-button
            class="iconfont icon-jiegou link-type"
            size="mini"
            circle
            style="border: 2px solid rgba(27, 31, 40, .1) !important;padding: 6px;"
            :title="$t('股东结构图')"
            @click="holderChart"
          />
        </div>
      </div>
      <el-table v-loading="holderLoading" :data="form.holders" :height="height" border>
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('股东名称')" show-overflow-tooltip align="center" min-width="250">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;">
              <img v-if="scope.row.logoInfo" :src="scope.row.logoInfo" width="35" height="35" style="border-radius: 50%; ">
              <el-link v-if="sourceType === 'bussRisk' && (scope.row.companyTycId || scope.row.personalTycId)" type="primary" class="link_a" style="padding-left:5px;" @click="getCompanyHolderInfo(scope.row)"><span style="padding-left:5px;text-overflow: ellipsis;overflow: hidden;">{{ scope.row.holderName }}</span></el-link>
              <span v-else style="padding-left:5px;text-overflow: ellipsis;overflow: hidden;">{{ scope.row.holderName }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="$t('股东名称')" align="center" prop="holderName" show-overflow-tooltip /> -->
        <el-table-column :label="$t('股东类型')" align="center" prop="holderType" :formatter="holderTypeFormat" min-width="140" show-overflow-tooltip />
        <el-table-column v-if="sourceType !== 'bussRisk'" :label="$t('股份数量(万股)')" align="center" prop="holderNum" show-overflow-tooltip min-width="140">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.holderNum) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('股权比例(%)')" align="center" prop="holderRatio" show-overflow-tooltip min-width="140" />
        <el-table-column :label="$t('认缴金额') + $t('金额单位')" align="center" prop="investAmount" min-width="140" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.investAmount, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('认缴时间')" align="center" prop="investDate" min-width="140">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.investDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="sourceType !== 'bussRisk'" :label="$t('是否实际控制人')" align="center" prop="whetherActualControl" min-width="140" :formatter="yesNoFormat" />
      </el-table>

      <!-- 添加或修改股东信息对话框 -->
      <el-dialog :title="$t('股东变更')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogFormHolder" append-to-body>
        <companyHolderChangeForm ref="companyHolderChangeForm" />
      </el-dialog>
      <!-- 对比股东信息对话框 -->
      <el-dialog :title="$t('股东变更对比')" :visible.sync="formOpenVS" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogFormHolder" append-to-body>
        <companyHolderVS ref="companyHolderVS" />
      </el-dialog>
      <!-- 股东结构图弹出框 -->
      <el-dialog :title="$t('股东结构图')" :visible.sync="formOpenChart" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogFormHolder" append-to-body>
        <companyHolderChart ref="companyHolderChart" :buss-id="$route.query.companyId" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getHoldersByCompanyId, listCompanyHolderChange, delCompanyHolderChange, getCompanyHolderChange } from '@/api/company/holder/companyHolderChange'
  import companyHolderChangeForm from './companyHolderChangeForm.vue'
  import companyHolderVS from './companyHolderVS.vue'
  import companyHolderChart from './companyHolderChart.vue'
export default {
  components: {
    companyHolderChangeForm,
    companyHolderVS,
    companyHolderChart
  },
  props: {
    sourceType: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: () => ''
    }
  },
  data() {
      return {
          // 变更历史遮罩层
          changeLoading: true,
          // 股东信息遮罩层
          holderLoading: true,
          // 是否显示弹出层
          formOpen: false,
          // 是否显示对比弹出层
          formOpenVS: false,
          // 是否显示股东结构图弹出层
          formOpenChart: false,
          // 查询参数
          queryParams: {
              companyId: this.$route.query.companyId,
              changeId: undefined
          },
          // 股东变更历史记录
          companyHolderChangeList: [],
          // 表单参数
          form: {
            holders: [],
            // 变更时间
            changeDate: undefined,
            // 总股数
            totalNum: 0,
            // 总股价
            totalMoney: 0,
            // 阶段: ''
            changeStage: ''
          },
          // 总条数
          total: 0,
          // 股东类型字典
          holderTypeOptions: [],
          // 是否字典
          yesNoOptions: [],
          // 单选按钮默认选中
          radioView: ''
      }
  },
  created() {
      this.getList()
      this.getDicts('company_person').then(response => {
        this.holderTypeOptions = response.data
      })
      this.getDicts('sys_yes_no').then(response => {
        this.yesNoOptions = response.data
      })
  },
  methods: {
    /** 查询股东信息列表 */
    getList() {
      this.changeLoading = true
      this.holderLoading = true
      // 先查询所有的变更历史数据，默认选中当前最新的一条变更记录
      listCompanyHolderChange(this.queryParams).then(response => {
        this.companyHolderChangeList = response.rows
        this.total = response.total
        this.changeLoading = false
        if (this.companyHolderChangeList.length > 0) {
          this.form = this.companyHolderChangeList[0]
          this.radioView = this.companyHolderChangeList[0].id
        } else {
          this.getHoldersByCompanyId()
        }
        this.holderLoading = false
      })
    },
    // 选中变更历史，展示对应数据
    choiceRadio(id) {
      this.holderLoading = true
      if (id !== '' && id !== null) {
        getCompanyHolderChange(id).then(res => {
          if (res.data !== null) {
            this.form = res.data
          }
          this.holderLoading = false
        })
      }
    },
    // 注册资本币种字典翻译
    holderTypeFormat(row) {
      return this.selectDictLabel(this.holderTypeOptions, row.holderType)
    },
    // 是否字典翻译
    yesNoFormat(row) {
      return this.selectDictLabel(this.yesNoOptions, row.whetherActualControl)
    },

    /** 搜索按钮操作 */
    queryHandle() {
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
        this.formOpen = true
        this.$nextTick(() => {
          this.$refs.companyHolderChangeForm.init()
        })
    },
    /** 股东变更对比 */
    holderVS() {
        this.formOpenVS = true
        this.$nextTick(() => {
          this.$refs.companyHolderVS.getList()
        })
    },
    /** 股东结构图 */
    holderChart() {
        this.formOpenChart = true
        this.$nextTick(() => {
          this.$refs.companyHolderChart.initChart()
        })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return delCompanyHolderChange(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    },
    // 如果没有股东变更信息，则默认展示所有股东
    getHoldersByCompanyId() {
      this.holderLoading = true
      getHoldersByCompanyId(this.$route.query.companyId).then(res => {
        if (res.rows != null) {
          this.form.holders = res.rows
        }
      })
    },
    getCompanyHolderInfo(row) {
      const companyTycId = row.companyTycId
      const personalTycId = row.personalTycId
      if (row.holderType === '1') {
        window.open('https://www.tianyancha.com/company/' + companyTycId, '_blank')
      } else {
        window.open('https://www.tianyancha.com/human/' + personalTycId, '_blank')
      }
    }
  }
}
</script>

